<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
	<ui:composition template="/WEB-INF/facelets/templateSolicitante.xhtml">
		<ui:define name="body">
			<f:view>
				<p:ajaxStatus onstart="statusDialog.show();"
					onsuccess="statusDialog.hide();" />
				<p:dialog modal="true" widgetVar="statusDialog" header="Cargando"
					draggable="false" closable="false">
					<p:graphicImage
						value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
				</p:dialog>
				<h:form id="frm" enctype="multipart/form-data">
					<p:wizard flowListener="#{solicitudView.onFlowProcess}"
						backLabel="Atras" nextLabel="Siguiente" id="wizard">
						<p:tab id="tab1" title="Informacion Solicitante">
							<p:growl id="msg" />
							<p:growl id="men" />
							<p:panel id="panelInfoSolicitante"
								style="height:300px;width:1068px">
								<div align="center">
									<h:panelGrid columns="3" id="panelGrid">
										<h:outputText id="msgIdTpDoc_TipoDocumento"
											value="*Tipo de Documento:" />
										<p:selectOneMenu id="TipoDocumento"
											value="#{solicitudView.idTipoDocumento}"
											style="height:20px;width:215px" required="true"
											requiredMessage="Debe ingresar el Tipo de Identificación">
											<f:selectItem itemLabel="Seleccione" itemValue="" />
											<f:selectItems value="#{solicitudView.tipoDocumento}" />
											<p:ajax listener="#{solicitudView.cambiarMaskNit}"
												update="txtNumeroIdentificacion" />
										</p:selectOneMenu>
										<p:tooltip id="tooltipSelNumDoc" for="TipoDocumento"
											value="Seleccionar un tipo de documento de la lista." />

										<h:outputText id="msgNumeroIdentificacion"
											value="*Número de Identificación:" />
										<p:inputMask id="txtNumeroIdentificacion"
											value="#{solicitudView.numeroIdentificacion}"
											mask="#{solicitudView.maskNit}" maxlength="20" size="30"
											required="true"
											requiredMessage="Debe ingresar el número de identificación" />
										<p:tooltip id="tooltiptxtNumDoc2"
											for="txtNumeroIdentificacion"
											value="Ingresar un número de identificación." />

										<h:outputText id="msgNombreEmpresa"
											value="Nombre de la Empresa:" />
										<p:inputText id="txtNombreEmpresa"
											binding="#{solicitudView.txtNombreEmpresa}" maxlength="50"
											size="30" required="true"
											requiredMessage="Debe ingresar el nombre de la empresa" />
										<p:tooltip id="tooltiptxtNomEmpresa" for="txtNombreEmpresa"
											value="Ingresar el nombre de la empresa a la cual pertenece." />

										<h:outputText id="msgNombreContacto"
											value="*Nombre de Contacto:" />
										<p:inputText id="txtNombreContacto"
											binding="#{solicitudView.txtNombreContacto}" maxlength="50"
											size="30" required="true"
											requiredMessage="Debe ingresar el nombre del contacto" />
										<p:tooltip id="tooltipNomContacto" for="txtNombreContacto"
											value="Ingrese un Nombre de contacto." />

										<h:outputText id="msgCorreoElectronico"
											value="*Correo Electronico:" />
										<p:inputText id="txtCorreoElectronico"
											binding="#{solicitudView.txtCorreoElectronico}"
											maxlength="50" size="30" required="true"
											requiredMessage="Debe ingresar el correo electronico"
											validatorMessage="Ingrese un Email Valido">
											<f:validateRegex
												pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
										</p:inputText>
										<p:tooltip id="tooltiptxtCorreo" for="txtCorreoElectronico"
											value="A este correo se le enviará la respuesta a su solicitud" />

										<h:outputText id="msgNumeroCelular" value="*Numero Celular:" />
										<p:inputMask id="txtNumeroCelular"
											value="#{solicitudView.numeroCelular}" mask="(999) 999-9999"
											maxlength="10" size="30" required="true"
											requiredMessage="Debe ingresar un número de celular" />
										<p:tooltip id="tooltiptxtCelular" for="txtNumeroCelular"
											value="Ingrese Número de celular." />

										<h:outputText id="msgTelefonoFijo" value="*Telefono Fijo:" />
										<p:inputMask id="txtTelefonoFijo"
											value="#{solicitudView.telefonoFijo}" mask="999-99-99"
											maxlength="7" size="30" required="true"
											requiredMessage="Debe ingresar un número fijo" />
										<p:tooltip id="tooltiptxtFijo" for="txtTelefonoFijo"
											value="Ingrese un Teléfono fijo." />
										<p:watermark for="txtCorreoElectronico"
											value="ejemplo@usbcali.edu.co" />
									</h:panelGrid>
								</div>
							</p:panel>
							<p:panel id="panelBoton" style="height:40px;width:1068px">
								<div align="center">
									<p:commandButton id="btnClear" value="Limpiar"
										action="#{solicitudView.action_clear_infoSol()}"
										binding="#{solicitudView.limpiarInfosol}"
										update="panelInfoSolicitante,msg,panelBoton" />
								</div>
							</p:panel>
						</p:tab>
						<p:tab id="tab2" title="Tipo de Solicitud">
							<p:messages id="msgTipoSol" showDetail="false" />
							<p:panel id="panelTipoSol" style="height:300px;width:1068px">
								<div align="center">
									<h:panelGrid columns="1" id="panelGridTipoSol">
										<p:selectOneRadio id="tipoSolicitud"
											value="#{solicitudView.idTipoSolicitud}" layout="grid"
											columns="5" required="true"
											requiredMessage="Debe seleccionar un tipo de PQR">
											<f:selectItems value="#{solicitudView.tipoSolicitud}"
												var="tipoSol" itemLabel="#{tipoSol.descTpSol}"
												itemValue="#{tipoSol.idTpSolPqr}" />
										</p:selectOneRadio>
									</h:panelGrid>
								</div>
							</p:panel>
						</p:tab>
						<p:tab id="tab3" title="Información">
							<div align="center">
								<p:messages id="msgInstructivo" showDetail="false" />
								<p:panel id="panelInstructivo" style="width:1068px">
									<h:panelGrid columns="1" id="panelGridInstructivo">
										<h:outputText value="#{solicitudView.descripcionParametro}" />
										<h:panelGrid columns="2" cellpadding="5">
											<p:dataTable id="tablaAnexosXTipoSol"
												rendered="#{solicitudView.anexos}"
												value="#{solicitudView.anexosPqrs}" var="anexosPqr">
												<p:column
													headerText="Para este tipo de solicitud debe incluir los siguientes anexos:">
													<h:outputText value="#{anexosPqr.descripcionAnexo}" />
												</p:column>
											</p:dataTable>
										</h:panelGrid>
									</h:panelGrid>
								</p:panel>
							</div>
						</p:tab>
						<p:tab id="tab4" title="Solicitud">
							<p:growl id="msg2"/>
							<p:panel id="panelSolicitudPqr" style="width:1068px">
								<div align="center">
									<h:panelGrid columns="1" id="panelGrid12">
										<h:panelGrid columns="3" id="panelGrid2">
											<h:outputText id="msgNombreCliente" value="Solicitante:" />
											<p:inputText id="txtNombreCliente"
												binding="#{solicitudView.txtNombreCliente}" disabled="true"
												size="98" />
											<p:tooltip id="toolCliente" for="txtNombreCliente"
												value="Nombre de Contcto ingresado." />

											<h:outputText id="msgNombreAgenciaAduana"
												value="*Nombre de Agencia de Aduana:" />
											<p:inputText id="txtNombreAgenciaAduana" maxlength="80"
												binding="#{solicitudView.txtNombreAgenciaAduana}" size="98" />
											<p:tooltip id="toolAgencia" for="txtNombreAgenciaAduana"
												value="Ingrese nombre de Agencia de Aduana." />

											<h:outputText id="msgMotSol" value="*Motivo de Soliciud:"
												rendered="#{solicitudView.sol}" />
											<p:selectOneRadio id="motSol" layout="grid" columns="5"
												value="#{solicitudView.motSolicitud}"
												rendered="#{solicitudView.sol}">
												<f:selectItems value="#{solicitudView.motivoSolicitud}"
													var="motSol" itemLabel="#{motSolicitud}"
													itemValue="#{motSolicitud}" />
											</p:selectOneRadio>
											<p:tooltip id="toolMotSol" for="motSol"
												value="Seleccione un Motivo de Solicitud."
												rendered="#{solicitudView.sol}" />

											<p:separator rendered="#{solicitudView.sol}" />
											<p:separator rendered="#{solicitudView.sol}" />
											<p:separator rendered="#{solicitudView.sol}" />

											<h:outputText id="msgMotRecl" value="*Motivo de Reclamación:"
												rendered="#{solicitudView.recl}" />
											<p:selectOneRadio id="motRecl" layout="grid" columns="5"
												value="#{solicitudView.motReclamacion}"
												rendered="#{solicitudView.recl}">
												<f:selectItems value="#{solicitudView.motivoReclamacion}"
													var="motRecl" itemLabel="#{motReclamacion}"
													itemValue="#{motReclamacion}" />
											</p:selectOneRadio>
											<p:tooltip id="toolMotRecl" for="motRecl"
												value="Seleccione un Motivo de Reclamación."
												rendered="#{solicitudView.recl}" />

										</h:panelGrid>
										<h:outputText id="msgDescripcionCaso"
											value="*Descripcion del Caso:" />
										<p:inputTextarea id="txtDescripcionCaso" maxlength="1500"
											value="#{solicitudView.descripcionCaso}" rows="10" cols="130" />
										<p:tooltip id="toolDescripcion" for="txtDescripcionCaso"
											value="Ingrese un descripción del caso." />

										<h:outputText id="msgSolicitudARealizar"
											value="*Solicitud a Realizar:"
											rendered="#{solicitudView.solRealizar}" />
										<p:inputTextarea id="txtSolicitudARealizar" maxlength="1500"
											value="#{solicitudView.solicitudARealizar}" rows="10"
											cols="130" rendered="#{solicitudView.solRealizar}" />
										<p:tooltip id="toolSolicitud" for="txtSolicitudARealizar"
											value="Ingrese la solicitud a realizar."
											rendered="#{solicitudView.solRealizar}" />

										<h:outputText id="msgAnexos" value="*Anexos (Los tipos de docuemntos que puede ajuntar son jpg-jpeg-png-pdf-xps):"
											rendered="#{solicitudView.anexos}" />
										<p:dataTable id="tablaAnexosXTipoSolDoc" paginator="true"
											rows="10" value="#{solicitudView.anexosPqrs}" var="anexosPqr"
											rendered="#{solicitudView.anexos}">
											<p:column>
												<h:outputText value="#{anexosPqr.descripcionAnexo}" />
											</p:column>
											<p:column headerText="Archivo">
												<p:fileUpload fileUploadListener="#{solicitudView.upload}"
													mode="advanced" dragDropSupport="false" update="messages"
													fileLimit="1" uploadLabel="Subir" label="Seleccionar"
													cancelLabel="cancelar"
													allowTypes="/(\.|\/)(jpg|jpe?g|png|pdf|xps)$/"
													fileLimitMessage="Solo es permitido Seleccionar un archivo">
												</p:fileUpload>
												<p:growl id="messages" />
											</p:column>
											<p:column>
												<p:selectBooleanCheckbox id="boolean"
													value="#{solicitudView.adjuntos.get(anexospqr)}"
													disabled="true" />
											</p:column>
										</p:dataTable>
										<p:tooltip id="toolAnexos" for="tablaAnexosXTipoSolDoc"
											value="Adjunte los anexos requeridos."
											rendered="#{solicitudView.anexos}" />
									</h:panelGrid>
								</div>
							</p:panel>
							<p:panel id="panelBotones" style="height:40px;width:1068px">
								<div align="center">
									<p:commandButton id="limpiarSolicitud"
										value="Limpiar Formulario"
										binding="#{solicitudView.limpiarSolicitud}"
										action="#{solicitudView.action_clear_formulario()}"
										update="panelSolicitudPqr,msg2,panelBotones" />
									<p:commandButton id="btnSave2" value="Enviar Solicitud"
										action="#{solicitudView.action_save()}"
										update="msg2,:frm:wizard" />
								</div>
							</p:panel>
						</p:tab>
					</p:wizard>
				</h:form>
			</f:view>
		</ui:define>
	</ui:composition>
</h:body>
</html>